import React from 'react';
import Title from './../../../wechatEdit/components/Drawer/components/DraweiCenter/components/Title'
import Swiper from './../../../wechatEdit/components/Drawer/components/DraweiCenter/components/Swiper';
import Navigation from './../../../wechatEdit/components/Drawer/components/DraweiCenter/components/Navigation';
import DisplayAdvertising from './../../../wechatEdit/components/Drawer/components/DraweiCenter/components/DisplayAdvertising'
import Search from './../../../wechatEdit/components/Drawer/components/DraweiCenter/components/Search';
import RichText from './../../../wechatEdit/components/Drawer/components/DraweiCenter/components//RichText';
import Announcement from './../../../wechatEdit/components/Drawer/components/DraweiCenter/components/Announcement';
import Audio from './../../../wechatEdit/components/Drawer/components/DraweiCenter/components/Audio'
import Video from './../../../wechatEdit/components/Drawer/components/DraweiCenter/components/Video'
import FormComponents from './../../../wechatEdit/components/Drawer/components/DraweiCenter/components/Form'
import Shop from './../../../wechatEdit/components/Drawer/components/DraweiCenter/components/Shop';
import ContactCustomer from './../../../wechatEdit/components/Drawer/components/DraweiCenter/components/ContactCustomer'
import SecondKill from './../../../wechatEdit/components/Drawer/components/DraweiCenter/components/SecondKill'
import './index.less'
const mobile = (props) => {
    const { data = {}, } = props
    const { list = [] } = data
    const { fontColor, backgroundType, backgroundImage, backgroundRepeat, backgroundColor } = data
    const backgroundSet = () => {
        if (backgroundType === 'color') {
            return {
                background: backgroundColor
            }
        } else {
            const backObj = {
                background: `url(${backgroundImage})`,
                backgroundRepeat: backgroundRepeat
            }
            return backObj
        }
    }
    return <div className='wechat_home_box'>
        <div style={backgroundSet()} className='main-preview-container'>
            <Title {...props}></Title>
            <div style={{ color: fontColor, height: '100%' }}>
                {list.map((val, o) => {
                    const { type } = val
                    if (type === 'swiper') {
                        return <Swiper key={o} data={val}></Swiper>
                    } else if (type === 'navigation') {
                        return <Navigation key={o} data={val}></Navigation>
                    } else if (type === 'search') {
                        return <Search key={o} data={val}></Search>
                    } else if (type === 'displayAdvertising') {
                        return <DisplayAdvertising key={o} data={val}></DisplayAdvertising>
                    } else if (type === 'richText') {
                        return <RichText key={o} data={val}></RichText>
                    } else if (type === 'announcement') {
                        return <Announcement key={o} data={val}></Announcement>
                    } else if (type === 'audio') {
                        return <Audio data={val}></Audio>

                    } else if (type === 'video') {
                        return <Video key={o} data={val}></Video>
                    }
                    else if (type === 'form') {
                        return <FormComponents key={o} data={val}></FormComponents>

                    } else if (type === 'shop') {
                        return <Shop key={o} data={val}></Shop>

                    } else if (type === 'contactCustomer') {
                        return <ContactCustomer key={o} data={val}></ContactCustomer>

                    } else if (type === 'secondKill') {
                        return <SecondKill key={o} data={val}></SecondKill>

                    }
                    return null
                })
                }
            </div>

        </div>
    </div>
}
export default mobile